<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
</head>
<body>

<div id="divForm">
    <el-row>
        <el-col :span="7">
            <div class="grid-content bg-purple">
                <span style="color: #FFFFFF">王凤我爱你</span>
            </div>
        </el-col>
        <el-col :span="9">
            <div class="grid-content bg-purple-dark">
                <el-container>
                    <el-header style="text-align: center; font-size: 12px">
                        <div style="margin-left: 50px;font-size: 20px">
                            <b style="color: red; font-size: 20px;">个人信息</b>
                        </div>
                    </el-header>
                    <el-form :label-position="'top'" label-width="80px" :model="formData">
                        <el-form-item label="姓名">
                            <el-input v-model="formData.name" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="学号/工号">
                            <el-input v-model="formData.userNumber" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="性别">
                            <template>
                                <el-radio v-model="formData.sex" label="男">男</el-radio>
                                <el-radio v-model="formData.sex" label="女">女</el-radio>
                            </template>
                        </el-form-item>
                        <el-form-item label="电话号码">
                            <el-input v-model="formData.phone"></el-input>
                        </el-form-item>
                        <el-form-item label="身份证号码">
                            <el-input v-model="formData.identification"></el-input>
                        </el-form-item>
                        <el-form-item label="班级">
                            <el-select v-model="formData.classId" placeholder="请选择班级" style="width: 300px">
                                <el-option
                                        v-for="cl in classes"
                                        :key="cl.classId"
                                        :label="cl.className"
                                        :value="cl.classId">
                                </el-option>
                            </el-select>
                            <el-form-item align="right">
                                <el-button type="warning" @click="updateUser()">提交</el-button>
                            </el-form-item>
                        </el-form-item>
                    </el-form>
                </el-container>
            </div>
        </el-col>
        <el-col :span="7">
            <div class="grid-content bg-purple">
                <span style="color: #FFFFFF">王凤我爱你</span>
            </div>
        </el-col>
    </el-row>
</div>

<script>
    new Vue({
        el: "#divForm",
        data: {
            formData: {},
            user: {},
            classes: [],
        },
        methods: {
            //弹窗
            open(mes, mes_type) {
                this.$alert(mes, '', {
                    confirmButtonText: '确定',
                    callback: action => {
                        this.$message({
                            type: mes_type,
                            message: mes,
                        });
                    }
                });
            },
            //更新用户
            updateUser() {
                let param = "action=editUserInfo&sex=" + this.formData.sex +
                    "&phone=" + this.formData.phone + "&identification=" + this.formData.identification +
                    "&classId=" + this.formData.classId + "&number=" + this.formData.userNumber;
                console.log(param)
                axios.post("/EpidemicControlSystem_war_exploded/UserServlet", param)
                    .then(res => {
                        if (res.data == true) {
                            this.open("修改成功", 'success');
                            this.getUser();
                        } else {
                            this.open("修改失败", 'error');
                        }
                    })
            },
            getUser() {
                axios.post("/EpidemicControlSystem_war_exploded/UserServlet", "action=user")
                    .then(res => {
                        this.formData = res.data.loginUserInfo;
                        this.user = res.data.loginUser;
                    });
            },
            //重新查找学院之下所有的班级
            selectClasses() {
                let param = "action=showClasses&facultyId=0";
                axios.post("/EpidemicControlSystem_war_exploded/FacultyServlet", param)
                    .then(res => {
                        this.classes = res.data;
                    });
            },
        },
        created() {   //自动触发写入的函数
            this.getUser();
            this.selectClasses();
        }
    });
</script>
</body>
</html>